<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				收到的红包
			</view>
			<image class="head_right" src="../../../static/diqiuquan/sandian.png" mode="" @tap="isshowMenu"></image>

		</view>
		<view class="select-tab" v-show="showMenu==true">
			<view class="sanjiaox"></view>
			<view class="hidden-box">
				<view class="small-Box" >
					<view class="menu-title">发出的红包</view>
				</view>
				<view class="small-Box">
					<view class="menu-title">收到的红包</view>
				</view>
				<view class="small-Box active" >
					<view class="menu-title">帮助</view>
				</view>
			</view>
		</view>
		<view class="padding-box">
			<picker class="fontStyle" mode="date" fields="month" start="1971-01-01" :end="endDate" @change="starDateChange">
				<view class="uni-input" v-if="starDate==''">请选择<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
				</view>
				<view class="uni-input" v-else>{{starDate}}
					<image class="down" src="../../../static/diqiuquan/down.png" mode=""></image>
				</view>
			</picker>
			<text class="todaymoney">增加500猫币 消耗2000猫币</text>
		</view>
		<view class="body">
			<view class="body_item">
				<view class="item_left">
					<image src="../../../static/avatar.jpg" mode=""></image>
					<view class="name_box">
						<text class="text1">用户名</text>
						<text class="text2">11:20</text>
					</view>
				</view>
				<text class="item_right">+50</text>
			</view>
		</view>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>

	</view>
</template>

<script>
	import mask from'../../../components/mask.vue'
	export default {
		components:{
			mask
		},
		data() {
			return {
				starDate: 1970,
				isShowMask:false,
				showMenu:false,
			}
		},
		methods: {
			starDateChange: function(e) {
				this.starDate = e.target.value
				if (this.closeDate != '') {
					if (this.menuIndex == 0) {
						this.getGetMoney()
					} else if (this.menuIndex == 1) {
						this.getSetMoney()
					}
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			isshowMenu(){
				if(this.showMenu==false){
					this.showMenu=true
					this.isShowMask=true
				}else{
					this.showMenu=false
					this.isShowMask=false
				}
			},
			closeMask(){
				this.showMenu=false
				this.isShowMask=false
			},
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		height: 128upx;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		box-sizing: border-box;
		z-index: 9999;
	}

	.head_left image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
	}

	.head_right {
		width: 50upx;
		height: 10upx;
		margin-left: 70upx;
	}
	.padding-box{
		padding-top: 128upx;
	}

	.body {
		background: #FFFFFF;
	}

	.body_item {
		padding: 0 24upx;
		height: 130upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx solid #E6E6E6;
	}

	.item_left image {
		width: 68upx;
		height: 68upx;
		overflow: hidden;
		border-radius: 50%;
	}

	.item_left {
		display: flex;
		align-items: center;
	}

	.name_box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.text1 {
		color: #333333;
		font-size: 28upx;
	}

	.text2 {
		color: #CCCCCC;
		font-size: 24upx;
	}

	.item_right {
		color: #333333;
		font-size: 40upx;
	}

	.fontStyle {
		display: flex;
		align-items: center;
	}

	.todaymoney {
		padding: 10upx 24upx;
		color: #999999;
		font-size: 26upx;
	}

	.down {
		width: 24upx;
		height: 14upx;
	}
	
	.select-tab {
		width: 241upx;
		height: 242upx;
		border-radius: 10upx;
		position: fixed;
		right: 24upx;
		top: 128upx;
		z-index: 10000;
		text-align: center;
	}
	
	.sanjiaox {
		border-style: solid;
		border-width: 15upx 15upx 15upx 15upx;
		border-color: transparent transparent white transparent;
		width: 0upx;
		height: 0upx;
		position: absolute;
		right: 10upx;
		top: -27upx;
	}
	
	.hidden-box {
		width: 100%;
		height: 250upx;
		border-radius: 10upx;
		background-color: white;
	}
	
	.small-Box {
		height: 80upx;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		display: flex;
		padding: 29upx 37upx;
		box-sizing: border-box;
		align-items: center;
		text-align: center;
	
	}
	
	.small-Box.active {
		border: none;
	}
	
	.menu-title {
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 20upx;
	}
	
	
</style>
